<template>
	<view>
		<view class="u-p-50">
			<view class="u-font-40 c-font-bold">事件上报</view>
			<view class="u-m-t-20">为推动问题的合适解决，请您的留言保持真实、客观、明确</view>
		</view>
		<view class="u-p-50">
			<u-form :model="form" ref="uForm">
				<u-form-item label="事件描述" required label-position="top" prop="content">
					<u-input v-model="form.content" type="textarea" />
				</u-form-item>
				<u-form-item label="事件标签" required label-position="top" prop="labels">
					<u-radio-group shape="square" v-model="form.labels">
						<u-radio v-for="(item, index) in vuex_config.labels" :key="index" :name="item">
							{{item}}
						</u-radio>
					</u-radio-group>
				</u-form-item>
				<u-form-item label="发生地点" required label-position="top" prop="address">
					<u-cell-item class="u-p-0" :border-bottom="false" icon="map-fill"
						:title="form.address ? form.address :'点击选择地点'" @click="chooseDizhi" value=""></u-cell-item>
				</u-form-item>
				<u-form-item label="添加图片" required label-position="top" prop="images">
					<u-upload ref="uUpload" :action="vuex_config.upload.uploadurl" :file-list="imageList"
						:header="header" :form-data="formdata" @on-uploaded="successUpload" @on-error="errorUpload"
						@on-remove="removeUpload" :max-count="9"></u-upload>
				</u-form-item>
				<u-cell-item class="u-p-l-0 u-p-r-0" hover-class="none" icon="eye" :arrow="false" title="是否公开">
					<u-switch slot="right-icon" size="40" v-model="form.isopen"></u-switch>
				</u-cell-item>
				<view class="u-p-t-50 u-p-b-50">
					<u-button type="success" shape="circle" :ripple="true" @click="report">提交</u-button>
					<!-- <u-button type="success" shape="circle" :ripple="true" @click="submit">提交</u-button> -->
				</view>
			</u-form>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				form: {
					content: '',
					labels: '',
					address: '',
					lat: 0,
					lng: 0,
					images: null,
					isopen: false
				},
				imageList: [],
				header: {},
				formdata: {},
				rules: {
					content: [{
						required: true,
						min: 10,
						message: '事件描述不少于10个字',
						trigger: 'blur,change'
					}],
					labels: [{
						required: true,
						message: '请选择事件标签',
						trigger: 'blur,change'
					}],
					address: [{
						required: false,
						message: '请选择地理位置',
						trigger: 'blur,change'
					}],
					images: [{
						required: false,
						message: '请上传图片',
						trigger: 'blur,change'
					}]
				},
			};
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			// this.$refs.uForm.setRules(this.rules);
			this.header = {
				token: this.vuex_token || '',
				uid: this.vuex_user.id || 0
			}
			// let isObj = this.$u.test.object(this.vuex_config.upload.multipart)
			// if (isObj) {
			// 	this.formdata = this.vuex_config.upload.multipart;
			// }
		},
		methods: {
			report() {
							this.$u.api.submitReport(this.form).then(res => {
								this.$u.toast(res.msg);
							})
						},
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						this.$refs.uUpload.upload();
						this.$u.api.submitReport(this.form).then(res => {
							this.$u.toast(res.msg);
							if (res.code) {
								setTimeout(() => {
									this.$u.route({
										type:'redirectTo',
										url:'/pages/user/report/list'
									})
								}, 1500);
							}
						});
					}
				});
			},
			chooseDizhi() {
				let that = this;
				uni.chooseLocation({
					success: function(res) {
						that.form['address'] = res.address;
						that.form['lat'] = res.latitude;
						that.form['lng'] = res.longitude;
					}
				})
			},
			successUpload(e) {
				this.uploadChanges(e)
			},
			removeUpload(index, lists, name) {
				this.uploadChanges(lists)
			},
			errorUpload(e) {
				this.$u.toast('上传失败了！');
			},
			uploadChanges(e) {
				let urls = [];
				e.map(item => {
					//编辑时，已存在的，response不存在
					if (!item.response) {
						urls.push(item.url)
					} else if (item.response.code) {
						urls.push(item.response.data.url);
					}
				});
				let value = urls.join(',');
				this.form.images = value;
			},
		}
	};
</script>
<style>
	.banner {
		background-color: #3CBDD0;
		color: #fff;
		line-height: 2;
	}

	.textarea {
		width: 100%;
		background-color: #f7f8fa;
		border-radius: 30rpx;
		padding: 30rpx;
	}

	.textarea textarea {
		height: 100px;
	}

	.label-box {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
	}

	.label {
		border: 1rpx solid #E2AB56;
		color: #E2AB56;
		border-radius: 10rpx;
		padding: 2px 10px;
		margin-right: 5px;
		margin-bottom: 5px;
	}

	.label.active {
		background-color: #E2AB56;
		color: #ffffff
	}

	.oper {
		padding: 30rpx;
		display: flex;
		justify-content: space-between;
	}
	.u-cell{
		padding:30rpx 50rpx;
	}
	.oper button {
		width: calc(50% - 15rpx);
		margin: 0;
	}
</style>
